<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>gitDNS</title>

</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<body>
    <div id="app">
        <h>更新时间     {{ submsg }}</h>
        <table border="1" class="table table-striped" >
            <thead>
                <tr>
                    <th >ip</th>
                    <th >DNS地址</th>
                    <button type="button" class="btn btn-primary" v-on:click="getDnsForce">强制刷新</button>
                </tr>
            </thead>
            <tbody>
                <tr v-for="ehon in msg" >
                    <td >{{ehon.ipaddress}}</td>
                    <td >{{ehon.hostname}}</td>
                </tr>
            </tbody>
        </table>
    </div>



</body>
<script> // 从后台取绘本
var vue = new Vue({
    el: '#app',
    data: {
        msg: null,
        submsg: null
    },
    mounted: function () {
        this.getDns()
    },
    methods: {
        getDns: function () {
            var that = this;
            let ctxPath = 'getDns';
            var getdate = 'getUpdateDate';
            axios.get(ctxPath)
                .then(function (response) {//返回类型为list<class>
                    that.msg = response.data;
                }).catch(function (reason) {
                console.log("error");

            });
            axios.get(getdate)
                .then(function (response) {//返回类型为list<class>
                    that.submsg = response.data;
                }).catch(function (reason) {
                console.log("error");
            });
            $table.bootstrapTable('refresh');
        },
        getDnsForce: function () {
            var that = this;
            let ctxPath = 'getDnsForce'
            var getdate = 'getUpdateDate';
            var v = confirm("更新需要时间,如更新时间较近,无需更新.现在是否更新");
            if(v){
                alert("更新需要时间,大约5分钟,请耐心等待")
                axios.get(ctxPath)
                    .then(function (response) {//返回类型为list<class>
                        that.msg = response.data;
                        axios.get(getdate)
                            .then(function (response) {//返回类型为list<class>
                                that.submsg = response.data;
                            }).catch(function (reason) {
                            console.log("error");
                        });
                    }).catch(function (reason) {
                    console.log("error");
                });
                $table.bootstrapTable('refresh');
            }

        },
    }
});

</script>

</html>